<template>
	<view class="wrap">
		<view class="article-title">{{formData.unitTitle}}{{formData.wenjianzi}}</view>
		<div class="doc-form">
			<div class="row">
				<div class="cell cell-2"><span>签发</span><br />
					<div id="qfGrid" class="image-grid">
						<image v-for="(value) in signImages['qfGrid']" v-if="sealOptionsKey.includes('qfGrid')"
							:src="value.imageUrl"
							class="seal-image"
							@click="handleLongPress(value.signUNID, value.hetype)"
						></image>
					</div>
				</div>
				<div class="cell cell-2">
					<span>审核</span>
					<br />
					<div id="syGrid" class="image-grid">
						<image v-for="(value) in signImages['syGrid']" v-if="sealOptionsKey.includes('syGrid')"
							:src="value.imageUrl"
							class="seal-image"
							@click="handleLongPress(value.signUNID, value.hetype)"
						></image>
					</div>
					<span>会签</span>
					<br />
					<div id="hqGrid" class="image-grid">
						<image v-for="(value) in signImages['hqGrid']" v-if="sealOptionsKey.includes('hqGrid')"
							:src="value.imageUrl"
							class="seal-image"
							@click="handleLongPress(value.signUNID, value.hetype)"
						></image>
					</div>
					<span>核稿</span>
					<br />
					<div id="hgGrid" class="image-grid">
						<image v-for="(value) in signImages['hgGrid']" v-if="sealOptionsKey.includes('hgGrid')"
							:src="value.imageUrl"
							class="seal-image"
							@click="handleLongPress(value.signUNID, value.hetype)"
						></image>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="cell cell-2"><span>办公室审核</span><br />
					<div class="backColor"
						style="border-top: 2px solid #EC635D;border-bottom: 2px solid #EC635D">
						<input type="text" v-model="formData.bgssh" placeholder="审核意见" />
					</div>
					<div id="sGrid1" class="image-grid">
						<image v-for="(value) in signImages['sGrid1']" v-if="sealOptionsKey.includes('sGrid1')"
							:src="value.imageUrl"
							class="seal-image"
							@click="handleLongPress(value.signUNID, value.hetype)"
						></image>
					</div>
				</div>
				<div class="cell cell-2">
					<span>主办单位</span>：<div class="backColor"><input placeholder="点击输入" type="text"
							v-model="formData.zhuban"
							style="border-top: 2px solid #EC635D;border-bottom: 2px solid #EC635D" /></div>
					<span>拟稿人</span>：<div class="backColor"><input type="text" v-model="formData.nigaoren"
							style="border-top: 2px solid #EC635D;border-bottom: 2px solid #EC635D" /></div>
					<span>电话</span>：<div class="backColor"><input type="text" v-model="formData.dianhua"
							style="border-top: 2px solid #EC635D;" /></div>
				</div>
			</div>
			<div class="row">
				<div class="cell cell-4">
					<span>标题</span>：
				</div>
			</div>
			<div class="row">
				<div class="cell cell-4">
					<input class="backColor" type="text" v-model="formData.title" />
				</div>
			</div>
			<div class="row">
				<div class="cell cell-4">
					<span>文件名</span>：
					<div id="filename" style="padding: 5rpx 15rpx 5rpx 15rpx;">
						<view v-for="(item, index) in formData.list" :key="index" class="file-item">
							<text>{{item.fileName}}</text>
							<u-button type="primary" size="mini" @click="loadFile(item)">预览</u-button>
						</view>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="cell" style="text-align: center;">
					<span>主送</span>
				</div>
				<div class="cell cell-7 backColor">
					<input style="height: 100%;" type="text" v-model="formData.zhusong" placeholder="点击输入" />
				</div>
			</div>
			<div class="row">
				<div class="cell" style="text-align: center;">
					<span>抄送</span>
				</div>
				<div class="cell cell-7 backColor">
					<input style="height: 100%;" type="text" v-model="formData.chaosong" placeholder="点击输入" />
				</div>
			</div>
			<div class="row">
				<div class="cell" style="text-align: center;">
					<span>附件</span>
				</div>
				<div class="cell cell-7 backColor">
					<input style="height: 100%;" type="text" v-model="formData.fujian" placeholder="点击输入" />
				</div>
			</div>
			<div class="row">
				<div class="cell" style="text-align: center;">
					<span>内容</span><br />
					<span>分发</span>
				</div>
				<div class="cell cell-7 backColor">
					<textarea type="text" v-model="formData.fenfa" style="height:100%" placeholder="点击输入"></textarea>
				</div>
			</div>
			<div class="row">
				<div class="cell cell-7 nowrap">编号：鲁黄[<span class="backColor"><input
								class="input short inputwidth" style="width: 32rpx;" type="text"
								v-model="formData.wenjianzi" /></span>][<span class="backColor"><input
								class="input short inputwidth2" style="width: 50rpx;" type="text"
								v-model="formData.nianhao" /></span>][<span class="backColor"><input
								class="input short inputwidth" style="width: 32rpx;" type="text"
							v-model="formData.bianhao" /></span>]号</div>
			</div>
			<div class="row">
				<div class="cell cell-7 nowrap"><span>总发文第[<span class="backColor"><input
										class="input short inputwidth2" style="width: 32rpx;" type="text"
								v-model="formData.fawenhao" /></span>]号</span></div>
			</div>
			<div class="row" style="text-align: center;">
				<div class="cell cell-4"><span>印制份数</span>
				</div>
				<div class="cell"><span>打字</span>
				</div>
				<div class="cell"><span>校对</span>
				</div>
				<div class="cell"><span>印刷</span>
				</div>
				<div class="cell"><span>用印</span>
				</div>
				<div class="cell"><span>封发</span>
				</div>
			</div>
			<div class="row">
				<div class="cell cell-4 nowrap">
					<span>正文</span>[<span class="backColor"><input type="text" class="input short inputwidth"
							v-model="formData.zwfs" /></span>]
					<span>附件</span>[<span class="backColor"><input type="text" class="input short inputwidth"
							v-model="formData.fjfs" /></span>]
				</div>
				<div class="cell backColor">
					<input type="text" style="height: 100%;text-align: center;" v-model="formData.dazi" />
				</div>
				<div class="cell backColor">
					<input type="text" style="height: 100%;text-align: center;" v-model="formData.jiaodui" />
				</div>
				<div class="cell backColor">
					<input type="text" style="height: 100%;text-align: center;" v-model="formData.yinshua" />
				</div>
				<div class="cell backColor">
					<input type="text" style="height: 100%;text-align: center;" v-model="formData.yongyin" />
				</div>
				<div class="cell backColor">
					<input type="text" style="height: 100%;text-align: center;" v-model="formData.fengfa" />
				</div>
			</div>
		</div>
	</view>
</template>

<script>
export default {
  props: {
    formData: {
      type: Object,
      required: true
    },
    signImages: {
      type: Object,
      required: true
    },
    sealOptionsKey: {
      type: Array,
      required: true
    },
    loadFile: {
      type: Function,
      required: true
    },
    handleLongPress: {
      type: Function,
      required: true
    }
  }
};
</script>
<style lang="scss" scoped>
	.image-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
		padding: auto;
	}
	.image-grid img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
	.backColor {
		background: #eaeaea;
	}

	.cell.nowrap {
		white-space: nowrap;
	}

	.input.short {
		display: inline-block;
		margin: 0 0 -5rpx;
	}

	.input.short.inputwidth {
		text-align: center;
		width: 50rpx !important;
		padding: 0rpx 0rpx 0rpx 0rpx !important;
	}

	.input.short.inputwidth2 {
		text-align: center;
		width: 100rpx !important;
		padding: 0rpx 0rpx 0rpx 0rpx !important;
	}

	.doc-form {
		border: 2rpx solid indianred;
		width: 720rpx;
		font-size: 25rpx;
		margin: 20rpx auto;
		background: #fff;
		color: indianred;

		.row {
			display: flex;

			.cell {
				border: 2rpx solid indianred;
				min-height: 30rpx;
				flex: 1;
				box-sizing: border-box;

				&.cell-2 {
					flex: 2;
				}

				&.cell-3 {
					flex: 3;
				}

				&.cell-4 {
					flex: 4;
				}

				&.cell-5 {
					flex: 5;
				}

				&.cell-6 {
					flex: 6;
				}

				&.cell-7 {
					flex: 7;
				}
				&.cell-8 {
					flex: 8;
				}

				input,
				textarea {
					border: none;
					// background: #eaeaea;
					// width: 100%;
					font-size: 22rpx;
					//文字不顶格
					padding: 3rpx 3rpx 10rpx 10rpx;
					line-height: 1.8;
					// margin: 5rpx 5rpx 5rpx 5rpx !important;
				}
				
				span {
					line-height: 1.8;
					margin: 0rpx 10rpx 0rpx 10rpx;
				}
			}
		}
	}

	[id$="Grid"] {
					min-height: 80rpx;
					// display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 4rpx;
					margin: 10rpx;
				}

				[id$="Grid1"] {
					min-height: 80rpx;
					// display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 4rpx;
					margin: 10rpx;
				}

	.file-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 0;
		
		text {
			flex: 1;
			margin-right: 20rpx;
		}
	}

	.float-action-btn {
		position: fixed;
		right: 15rpx;
		top: 10rpx;
		width: 70rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;

		.icon {
			color: white;
			font-size: 20rpx;
			font-weight: bold;
		}
	}

	.action-menu {
		position: fixed;
		right: 3rpx;
		top: 80rpx;
		width: 100rpx;

		.menu-item {
			background: white;
			padding: 15rpx;
			margin-bottom: 10rpx;
			border-radius: 30rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
			text-align: center;
			font-size: 24rpx;
			color: #333;
			transform-origin: bottom right;

			&:active {
				background: #f0f0f0;
			}
		}
	}

	.slide-enter-active,
	.slide-leave-active {
		transition: all 0.3s ease;
	}

	.slide-enter-from,
	.slide-leave-to {
		opacity: 0;
		transform: scale(0);
	}

	.menu-item-sign {
		background: linear-gradient(135deg, #FF6347, #FF4500) !important;
		color: white !important;
		box-shadow: 0 4rpx 12rpx rgba(34, 139, 34, 0.3) !important;
	}

	.menu-item-comment {
		background: linear-gradient(135deg, #6495ED, #1E90FF) !important;
		color: white !important;
		box-shadow: 0 4rpx 12rpx rgba(30, 144, 255, 0.3) !important;
	}

	.menu-item-reject {
		background: linear-gradient(135deg, #FFA500, #FF8C00) !important;
		color: white !important;
		box-shadow: 0 4rpx 12rpx rgba(255, 69, 0, 0.3) !important;
	}

	.menu-item-send {
		background: linear-gradient(45deg, #ff8c00, #ff4500) !important;
		color: #fff !important;
		box-shadow: 0 2px 4px rgba(255, 140, 0, 0.3) !important;
	}

	.menu-item-text-sign {
		background-color: #9c27b0;
		color: white;
	}

	.article-title {
		top: 1rpx;
		font-size: 40rpx;
		font-weight: 400;
		text-align: center;
		padding-bottom: 10rpx;
		font-weight: bold;
		margin: 30rpx 30rpx 0;
		color: rgba(236, 99, 93, 1);
	}

	.seal-dialog-bg {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.3);
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.seal-dialog {
		background: #fff;
		border-radius: 10rpx;
		padding: 40rpx;
		width: 80vw;
		z-index: 999;
	}

	.seal-title {
		font-size: 32rpx;
		margin-bottom: 20rpx;
	}

	.picker {
		border: 1rpx solid #eee;
		padding: 20rpx;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
		background: #f8f8f8;
		min-width: 200rpx;
		z-index: 99999;
	}

	/* 图章列表弹窗样式 */
	.seal-list-dialog-bg {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1000;
	}

	.seal-list-dialog {
		background-color: #fff;
		border-radius: 10rpx;
		width: 90%;
		max-width: 800rpx;
		padding: 30rpx;
	}

	.seal-list-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
		text-align: center;
		color: #333;
	}

	.seal-list-content {
		max-height: 800rpx;
		overflow-y: auto;
	}

	.seal-item {
		display: flex;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1rpx solid #eee;
		cursor: pointer;
		transition: background-color 0.3s;
	}

	.seal-item:hover {
		background-color: #f5f5f5;
	}

	.seal-image {
		width: 90rpx;
		height: 80rpx;
		margin-right: 10rpx !important;
		object-fit: contain;
		// background-color: #f8f8f8;
		// border: 1px solid #eee;
		border-radius: 4rpx;
		padding: 0rpx;
	}

	.seal-name {
		font-size: 28rpx;
		color: #333;
		flex: 1;
	}

	.seal-list-footer {
		margin-top: 30rpx;
		text-align: right;
		padding-top: 20rpx;
		border-top: 1rpx solid #eee;
	}

	.comment-dialog {
		width: 600rpx;
		background: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);

		.dialog-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			background: #f8f9fa;
			border-bottom: 1rpx solid #eee;

			.dialog-title {
				font-size: 32rpx;
				font-weight: 500;
				color: #333;
			}

			.dialog-close {
				font-size: 40rpx;
				color: #999;
				cursor: pointer;
				padding: 0 10rpx;

				&:hover {
					color: #666;
				}
			}
		}

		.dialog-content {
			padding: 30rpx;

			.form-item {
				margin-bottom: 24rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.form-label {
					display: block;
					font-size: 28rpx;
					color: #666;
					margin-bottom: 12rpx;
				}

				.form-input {
					width: 100%;
					height: 80rpx;
					border: 1rpx solid #ddd;
					border-radius: 8rpx;
					padding: 0 20rpx;
					font-size: 28rpx;
					background: #fff;
					box-sizing: border-box;

					&::placeholder {
						color: #999;
					}

					&:focus {
						border-color: #007AFF;
					}
				}

				.form-picker {
					width: 100%;

					.picker-content {
						width: 100%;
						height: 80rpx;
						border: 1rpx solid #ddd;
						border-radius: 8rpx;
						padding: 0 20rpx;
						font-size: 28rpx;
						background: #fff;
						display: flex;
						align-items: center;
						justify-content: space-between;
						box-sizing: border-box;

						.picker-arrow {
							color: #999;
							font-size: 24rpx;
						}
					}
				}
			}
		}

		.dialog-footer {
			padding: 20rpx 30rpx;
			display: flex;
			justify-content: flex-end;
			gap: 20rpx;
			border-top: 1rpx solid #eee;

			button {
				margin: 0;
				padding: 0 30rpx;
				height: 56rpx;
				line-height: 56rpx;
				font-size: 24rpx;
				border-radius: 6rpx;

				&.btn-cancel {
					background: #f5f5f5;
					color: #666;
					border: 1rpx solid #ddd;

					&:hover {
						background: #eee;
					}
				}

				&.btn-confirm {
					background: #007AFF;
					color: #fff;
					border: none;

					&:hover {
						background: #0062cc;
					}
				}
			}
		}
	}

	.preview-dialog {
		background-color: #fff;
		padding: 20px;
		border-radius: 8px;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 80%;
		max-width: 400px;
		.preview-image {
			width: 100%;
			height: auto;
			margin-bottom: 15px;
			border: 1px solid #eee;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		}
		.close-button {
			background-color: #007aff;
			color: #fff;
			padding: 8px 20px;
			border-radius: 5px;
			cursor: pointer;
			margin-top: 10px;
		}
	}

	.participants-list {
		max-height: 300rpx;
		border: 1px solid #eee;
		border-radius: 8rpx;
		padding: 10rpx;
		margin-top: 10rpx;
	}

	.participant-item {
		display: flex;
		align-items: center;
		padding: 15rpx;
		border-bottom: 1px solid #f5f5f5;

		&:last-child {
			border-bottom: none;
		}

		checkbox {
			margin-right: 15rpx;
		}

		text {
			font-size: 28rpx;
			color: #333;
		}
	}

	.btn-preview {
		background-color: #4CAF50;
		color: #fff;
		margin: 0 10rpx;
	}

	.search-container {
		position: relative;
		width: 100%;
	}

	.search-input {
		width: 100%;
		height: 80rpx;
		border: 1rpx solid #ddd;
		border-radius: 8rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		background: #fff;
		box-sizing: border-box;
	}

	.search-results {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-height: 400rpx;
		background: #fff;
		border: 1rpx solid #ddd;
		border-radius: 8rpx;
		margin-top: 4rpx;
		z-index: 99999;
	}

	.search-item {
		padding: 20rpx;
		border-bottom: 1rpx solid #f5f5f5;
		font-size: 28rpx;
		
		&:active {
			background: #f8f8f8;
		}
		
		&:last-child {
			border-bottom: none;
		}
	}
	.search-results[data-v-03c53ae6] {
		max-height: 200rpx !important;
	}
</style>